<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <style> 
        .p{
            font-size: 50px;
        }
    </style>
    <script src="../js/vue.js"></script>
    <title>Document</title>
</head>
<body>
    <!-- 添加指定标识的模板结构 -->
    <div id="app">
        <!-- v-html指令指定的成员值会覆盖住标签之间的内容 -->
        <h1 v-html = 'msg'><span>{{name}}</span></h1>
        <h1 v-html ='msg'><p v-text = 'name'></p></h1>
        <h1 v-text = 'name'><p v-html ='name'></p></h1>
        <!-- 指令的层级大于插值表达式 会反向覆盖 -->
        <p>{{name}}<h1 v-html = 'msg'>111</h1></p>
        <p>{{name}}111</p>
        <div v-html = 'name2'></div>
        <!-- 可以用v-html的方式添加样式 -->
        <div v-html = 'name3' class="p"></div>
    </div>

</body>
<script>
    var vm = new Vue({
        el : '#app',
        data : {
            msg : '地主兄最帅',
            name : 'dizhuxiong',
            name2 : '<ul><li>hahaha</li><li>hahaha</li><li>&nbps &nbps msg</li></ul>',
            name3 :'<p style="font-size: 10px; color:aqua"> &nbps &nbps aaaaaa</p>'
        },
        method : {},
    })
</script>
</html>